<template>
    <div>
        <div  class="tabbar-bottom-height">
            <div @click="changeTabbar(item)" v-for="(item,index) in list" :key="index" class="tabbar-box">
                <img v-if="active===item.id" :src="item.active" alt="">
                <img v-else :src="item.item" alt="">
                <p :class="{'active':item.id === active}">{{item.name}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
      computed: {
        active() {
          return this.list.find(item => item.path === this.$route.path)?.id || 1
        }
      },
        data(){
            return{
                istaBbar:true,
                list:[
                  // 首页
                    {id:1,name:this.$t('h.A01'),active:require('@/assets/image/home1.png'),item:require('@/assets/image/home2.png'),path:'/'},
                  // 商品
                  {id:2,name:this.$t('h.A02'),active:require('@/assets/image/cate1.png'),item:require('@/assets/image/cate2.png'),path:'/product'},
                  // 购物车
                  {id:3,name:this.$t('h.A03'),active:require('@/assets/image/shop.png'),item:require('@/assets/image/shop2.png'),path: '/shop'},
                  // 我的
                    {id:4,name:this.$t('h.A04'),active:require('@/assets/image/user.png'),item:require('@/assets/image/user2.png'),path:'/mine'}
                ]//页面中得list标签
            }
        },
        methods:{
            changeTabbar(item){
                this.$router.push({
                  path:item.path
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .tabbar-bottom-height {
        height: 60px;
        position: fixed;
        padding: 5px 0 0 0;
        box-sizing: border-box;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 0.25rem rgba(0,0,0,.08);
        .tabbar-box {
            width: 25%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 5px 0 ;
            box-sizing: border-box;
            img{
                height: 20px;
            }
            p{
                width: 100%;
                text-align: center;
                color: #aaa;
                font-size: 10px;
            }
            .active{
                color: #002FFF;
            }
        }
    }
</style>
